Kobayashi个人主页 No.1 - 技术细节与部署指南

Kobayashi个人主页 - 技术细节与部署指南

项目概述

本项目包含两个版本的个人主页：

  1. 原生HTML版本 (index/) - 纯HTML/CSS/JavaScript + Three.js
  2. Vue3版本 (vue3_index/) - Vue3 + Vite + Three.js

技术栈

原生HTML版本

  • HTML5 - 页面结构
  • CSS3 - 样式与动画
  • JavaScript (ES6+) - 交互逻辑
  • Three.js (r128) - 3D星空场景
  • Web Audio API - 音频播放

Vue3版本

  • Vue 3.4.21 - 前端框架
  • Vite 5.1.6 - 构建工具
  • Three.js 0.128.0 - 3D渲染
  • @vitejs/plugin-vue 5.0.4 - Vue插件

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
个人主页/
├── index/                    # 原生HTML版本
│   ├── index.html           # 中文主页
│   ├── en/                  # 英文版本
│   ├── zh-TW/               # 繁体中文
│   ├── ja/                  # 日文
│   ├── ko/                  # 韩文
│   ├── fr/                  # 法文
│   ├── ru/                  # 俄文
│   ├── ar/                  # 阿拉伯文
│   └── assets/
│       ├── css/index.css    # 样式文件
│       ├── js/index.js      # 核心逻辑
│       ├── fonts/           # 字体文件
│       ├── music/           # 背景音乐
│       └── favicon.ico      # 图标
│
└── vue3_index/              # Vue3版本
    ├── src/
    │   ├── App.vue          # 根组件
    │   ├── main.js          # 入口文件
    │   ├── components/
    │   │   └── Header.vue   # 头部组件
    │   └── assets/          # 静态资源
    ├── public/              # 公共资源
    ├── dist/                # 构建输出
    ├── vite.config.js       # Vite配置
    └── package.json         # 依赖管理

核心功能技术实现

1. 3D星空场景 (Three.js)

主要功能：

  • 创建太阳系模型（太阳 + 8大行星）
  • 行星轨道动画
  • 粒子星空背景
  • 鼠标跟随视角控制
  • 根据滚动切换3D模型

关键代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 初始化Three.js场景
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, aspect, 1, 2000);
renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });

// 创建太阳系
createSolarSystem();    // 创建太阳、行星、轨道
createParticleField();  // 创建2000个粒子星空

// 行星配置
planetConfigs = [
  { name: 'mercury', radius: 8, distance: 100, speed: 0.04, color: 0x8c7853 },
  { name: 'venus', radius: 14, distance: 140, speed: 0.015, color: 0xe6c87a },
  // ... 其他行星
];

2. 自定义滚动系统

功能特点：

  • 平滑滚动动画
  • 自定义滚动条指示器
  • 鼠标滚轮支持
  • 触摸滑动支持
  • 滚动进度关联3D场景

实现原理：

1
2
3
4
5
6
7
8
9
10
11
// 平滑滚动插值
const diff = targetScrollY - scrollY;
if (Math.abs(diff) > 0.5) {
    scrollY += diff * 0.08;  // 缓动系数
}

// 根据滚动位置更新3D模型
updateCurrentModel();

// 应用滚动位移
mainScroll.style.transform = `translate3d(0, ${-scrollY}px, 0)`;

3. 多语言支持

支持语言：

  • 简体中文 (zh-CN)
  • 繁体中文 (zh-TW)
  • English (en)
  • 日本語 (ja)
  • 한국어 (ko)
  • Français (fr)
  • Русский (ru)
  • العربية (ar)

实现方式：

  • 每个语言独立HTML文件
  • 语言切换通过localStorage记忆
  • 下拉菜单选择语言

4. 音频系统

功能：

  • 背景音乐播放/暂停
  • 音量淡入淡出
  • 自定义音频按钮动画
  • Web Audio API处理

关键代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 创建音频上下文
audioContext = new (window.AudioContext || window.webkitAudioContext)();

// 加载音频
function loadAudio() {
    const request = new XMLHttpRequest();
    request.open('GET', '/assets/music/Andrew Prahlow - Travelers.mp3', true);
    request.responseType = 'arraybuffer';
    request.onload = function() {
        audioContext.decodeAudioData(request.response, function(buffer) {
            audioBuffer = buffer;
            playAudio();
        });
    };
    request.send();
}

// 淡入效果
gainNode.gain.setValueAtTime(0, audioContext.currentTime);
gainNode.gain.linearRampToValueAtTime(0.3, audioContext.currentTime + 0.5);

5. 滚动动画

效果：

  • Hero区域文字随滚动淡出
  • Section内容进入视口时淡入
  • 左右滑入动画
  • 滚动指示器更新

实现：

1
2
3
4
5
6
7
8
// Intersection Observer监听元素可见性
observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('is-visible');
        }
    });
}, { threshold: 0.1 });

开发步骤

方式一：原生HTML版本开发

  1. 克隆/下载项目

    1
    cd 个人主页/index

  2. 直接打开

    • 使用浏览器直接打开 index.html
    • 或使用本地服务器

  3. 本地服务器（推荐）

    1
    2
    3
    4
    5
    # 使用Python
    python -m http.server 8080

    # 或使用Node.js (http-server)
    npx http-server -p 8080

  4. 访问

    1
    http://localhost:8080

方式二：Vue3版本开发

  1. 进入项目目录

    1
    cd 个人主页/vue3_index

  2. 安装依赖

    1
    npm install

  3. 启动开发服务器

    1
    npm run dev

  4. 访问开发地址

    1
    http://localhost:5173

  5. 构建生产版本

    1
    npm run build

部署指南

方案一：静态网站托管 (推荐)

GitHub Pages

  1. 创建仓库

    • 在GitHub创建新仓库

  2. 上传代码

    1
    2
    3
    4
    5
    6
    cd 个人主页/index
    git init
    git add .
    git commit -m "Initial commit"
    git remote add origin https://github.com/用户名/仓库名.git
    git push -u origin main

  3. 启用Pages

    • 进入仓库 Settings → Pages
    • Source选择 Deploy from a branch
    • Branch选择 main / root
    • 保存后等待部署

  4. 访问

    1
    https://用户名.github.io/仓库名

Vercel

  1. 安装Vercel CLI

    1
    npm install -g vercel

  2. 部署

    1
    2
    cd 个人主页/index
    vercel

  3. 跟随提示完成部署

Netlify

  1. 访问 netlify.com
  2. 拖拽 index 文件夹到上传区域
  3. 等待部署完成

方案二：云服务器部署 (Nginx)

1. 准备服务器

  • 购买云服务器（阿里云、腾讯云等）
  • 安装Linux系统（Ubuntu/CentOS）

2. 安装Nginx

Ubuntu/Debian:

1
2
sudo apt update
sudo apt install nginx

CentOS:

1
sudo yum install nginx

3. 上传文件

1
2
3
4
5
# 使用SCP上传
scp -r 个人主页/index/* user@服务器IP:/var/www/html/

# 或使用Git克隆
git clone 仓库地址 /var/www/html

4. 配置Nginx

创建配置文件 /etc/nginx/sites-available/kobayashi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
server {
    listen 80;
    server_name your-domain.com;
    
    root /var/www/html;
    index index.html;
    
    location / {
        try_files $uri $uri/ =404;
    }
    
    # 缓存静态资源
    location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|mp3)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
    
    # Gzip压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript 
               application/x-javascript application/xml+rss 
               application/json application/javascript;
}

启用站点：

1
2
3
sudo ln -s /etc/nginx/sites-available/kobayashi /etc/nginx/sites-enabled/
sudo nginx -t  # 测试配置
sudo systemctl restart nginx

5. 配置HTTPS (Let’s Encrypt)

1
2
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com

方案三：Vue3版本部署

1. 构建项目

1
2
3
cd 个人主页/vue3_index
npm install
npm run build

2. 部署 dist 文件夹

将 dist/ 目录下的文件部署到任意静态托管服务，步骤同方案一。

自定义配置

修改内容

  1. 个人信息 - 编辑 index.html 中的文本
  2. 联系方式 - 修改邮箱、博客链接等
  3. 背景音乐 - 替换 assets/music/ 下的MP3文件
  4. 微信二维码 - 放置 wechat-qrcode.png 到根目录

修改样式

编辑 assets/css/index.css 自定义样式。

修改3D场景

编辑 assets/js/index.js 中的 createSolarSystem() 和相关函数。

性能优化建议

  1. 图片压缩 - 使用TinyPNG等工具压缩图片
  2. 启用CDN - 将静态资源托管到CDN
  3. 懒加载 - 大图片使用懒加载
  4. 缓存策略 - 配置合理的缓存头
  5. 代码分割 - Vue3版本已自动处理

常见问题

Q: 3D场景不显示？

A: 检查浏览器是否支持WebGL，确认Three.js CDN加载成功。

Q: 音乐无法播放？

A: 现代浏览器需要用户交互后才能播放音频，点击页面任意位置后再试。

Q: 如何添加更多语言？

A: 复制现有语言文件夹，翻译内容后添加到语言切换菜单。

Q: Vue3版本如何修改端口？

A: 在 vite.config.js 中添加 server: { port: 3000 } 配置。

技术支持